<template>
  <div class="app-container">
    <el-table :data="list" border fit highlight-current-row>
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        :label="$t('feedbacklist.table.userId')"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.user_id }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('feedbacklist.table.userName')"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('feedbacklist.table.title')" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('feedbacklist.table.content')" align="center">
        <template slot-scope="scope">
          {{ scope.row.questions }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('feedbacklist.table.pic')" align="center">
        <template slot-scope="scope">
          <!-- {{ scope.row.pic }} -->
          <img style="width: 50px;" :src="scope.row.pic" alt="">
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('feedbacklist.table.phone')"
        prop="price"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.mobile }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('feedbacklist.table.status')" align="center">
        <template slot-scope="scope">
          <el-progress
            :format="format"
            :text-inside="true"
            :stroke-width="26"
            :percentage="curr[scope.row.state]"
          ></el-progress>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('common.operate')"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="changeState(scope.row.id, 1)"
          >
            {{ $t("common.acceptance") }}
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="changeState(scope.row.id, 2)"
          >
            {{ $t("common.finish") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- ----------------------------------分页 -->
    <div class="block" style="float: right; margin-top: 20px">
      <!-- <span class="demonstration">显示总数</span> -->
      <el-pagination
        background
        @current-change="fetchData"
        :current-page.sync="page_num"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- --------------------------------------- -->
  </div>
</template>
  
  <script>
var test = 0;
import axios from "axios";
import feedList from "@/api/feedbacklist";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      orderBy: "12", //排序的方式,是升序还是降序
      key: "", //这个是要排序的字段,需要绑定prop的
      //最后需要把这两个字段传给后端就可以实现排序
      list: [], //列表条件封装对象
      page_num: 1,
      page_size: 8, //每8个数据一页
      total: 1, //初始化
      searchObj: {}, //条件封装对象
      multipleSelection: [], //批量选择中选择的记录列表
      dialogImportVisible: false, //弹框
      headers: {
        Authorization: getToken(),
      },
      curr: {
        0: 0,
        1: 50,
        2: 100,
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    format(percentage) {
      if (percentage == 0) return this.$t('feedbacklist.state.state1')
      if (percentage == 50) return this.$t('feedbacklist.state.state2')
      if (percentage == 100) return this.$t('feedbacklist.state.state3')
      return this.$t('feedbacklist.state.state3');
    },
    fetchData(page = 1) {
      this.page_num = page;
      var vm = this;
      feedList
        .getlist(this.page_num, this.page_size)
        //请求成功调用
        .then((resp) => {
          vm.list = resp.data.orderList.list;
          vm.total = resp.data.orderList.total;
        })
        .catch((error) => {});
    },
    changeState(id, state) {
      feedList
        .changeState({ id, state })
        //请求成功调用
        .then((resp) => {
          this.fetchData(this.page_num);
          this.$message.success(this.$t("common.success"));
        })
        .catch((error) => {});
    },
  },
};
</script>
  